/*
  @author hcao
  @date 2016/11/14
  @desc 所有样式
  
 */



* {
  margin: 0;
  padding: 0;
}
html body {
  font-family: "微软雅黑";
  font-size: 14px;
  text-align: center;
}
@media (max-width: 350px) {
  html body {
    font-size: 12px;
  }
}
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
input,textarea{-webkit-appearance:none;}
.commond_bottom {
  background: url("../img/end-bg.png") repeat-x;
  background-size: contain;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 1.2em;
  color: #fff1d3;
  z-index: 900;
}
.commond_bottom ul {
  overflow: hidden;
  list-style: none;
  box-sizing: border-box;
  padding: 5% 5px 10px;
}
.commond_bottom ul li {
  padding: 1% 0;
  box-sizing: border-box;
  float: left;
  width: 50%;
}
.commond_bottom .my_award {
  border-right: 1px solid #d3a655;
}
.commond_bottom .my_award  a{
  text-decoration: none;
  color: #fff1d3;;
}
.commond_bottom .activity_rule {
  border-right: 1px solid #d3a655;
}
/*第一页 开始*/
.page1_wrap {
  text-align: center;
  z-index: 1;
  min-height: 480px;
}
.page1_wrap .logo {
  width: 44%;
  position: absolute;
  top: 2%;
  left: 3vw;
}
.page1_wrap .logo img {
  width: 100%;
}
.page1_wrap .body_bg {
  width: 100%;
}
.page1_wrap .body_bg img {
  width: 94%;
  padding-left: 5.7vw;
}
.page1_wrap .font {
  width: 82.7%;
  margin: 6% auto;
}
.page1_wrap .font img {
  width: 100%;
}
.page1_wrap .begin {
  width: 80%;
  margin: 15% auto;
}
.page1_wrap .begin img {
  width: 100%;
}
@media (max-width: 350px) {
  .begin {
    margin: 5% auto !important;
  }
}
/*第一页 结束*/


/*第二页 开始*/
.page2_wrap {
  text-align: center;
}
.page2_wrap .title_img {
  z-index: 1;
  width: 100%;
  margin-top: -4%;
  position: relative;
}
.page2_wrap .title_img img {
  width: 100%;
}
.page2_wrap .select_question {
  position: relative;
  z-index: 100;
  margin: -6% auto;
  background: url("../img/select-bg.png") 50% no-repeat;
  background-size: contain;
  width: 96%;
  margin-bottom: 20%;
}
.page2_wrap .select_question ul {
  font-size: 1.2em;
  color: #48342d;
  list-style: none;
  padding-top: 1%;
  padding-bottom: 5%;
}
.page2_wrap .select_question ul li {
  width: 80%;
  margin: -1% auto;
  padding: 5% 0 8%;
  background: url("../img/guankabg.png") no-repeat;
  background-size: contain;
}
.page2_wrap .select_question ul li:first-child {
  margin-top: 9%;
}
/*第二页 结束*/


/*第三页 开始*/
.page3_wrap {
  position: relative;
}
.page3_wrap .section {
	width: 100%;
  position: absolute;
  top: 44%;
  left: 0vw;
  font-size: 1.3em;
  color: #fff;
  letter-spacing: 0.3em;
  margin-left: -0.7em;
  z-index: 200;
}
.page3_wrap .bgimg {
  z-index: 400;
  position: absolute;
  top: 24%;
  width: 100%;
}
.page3_wrap .bgimg img {
  width: 100%;
}

.page3_wrap .question_box {
  position: relative;
  z-index: 10;
  margin: -2.5% auto;
  width: 96%;
  height: 110%;
  font-size: 1.1em;
  z-index: 401;
}
.page3_wrap .question_box .time {
  margin: 2% auto;
  overflow: hidden;
  width: 83%;
  font-size: 1.2em;
  padding: 2% 0 0;
}
.page3_wrap .question_box .time #time {
	width: 59px;
	height: 35px;
  float: left;
  background: url("../img/time.png") 80% 100% no-repeat;
  background-size: contain;
  font-size: .9em;
  background-size: contain;
  color: #fff;
  line-height: 35px;
}
.page3_wrap .question_box .time #number {
  margin-top: 3.5%;
  float: right;
  color: #af8701;
}
.page3_wrap .question_box .question {
  position: relative;
  margin: 7% auto;
  width: 80%;
  text-align: justify;
  margin-bottom: 30%;
}
.page3_wrap .question_box .question .selection ul {
  list-style: none;
}
.page3_wrap .question_box .question .selection ul li:first-child {
  margin-top: 4%;
}
.page3_wrap .question_box .question .selection ul li {
  background: #ededed;
  margin-bottom: 4%;
  border-radius: 50px;
  padding: 4px 4%;
  overflow: hidden;
}
.page3_wrap .question_box .question .selection ul li p {
  display: inline-block;
  float: left;
}
.page3_wrap .question_box .question .selection ul li span {
  float: left;
  display: inline-block;
  width: 85%;
}

/*第三页 结束*/


/*第四页 开始*/
.page4_wrap .have_reward {
  margin: -5.5% auto;
  border: 4px solid #bf1a20;
  width: 94%;
  background-color: #fff9ee;
  letter-spacing: 1px;
  border-radius: 10px;
}
.page4_wrap .have_reward .elapsed {
  font-size: 1.1em;
  padding-top: 11%;
}
.page4_wrap .have_reward .elapsed span {
  color: #bf1a20;
}
.page4_wrap .have_reward .xueba_img {
  margin: 5% auto;
  width: 55%;
  position: relative;
}
.page4_wrap .have_reward .xueba_img .chenghao {
  color: #17355b;
  position: absolute;
  top: 38%;
  left: 35%;
}
.page4_wrap .have_reward .xueba_img img {
  width: 100%;
}
.page4_wrap .have_reward .font {
  line-height: 170%;
}
.page4_wrap .have_reward .font span {
  color: #bf1a20;
}
.page4_wrap .have_reward .my_get {
  margin: 5% auto;
  width: 85%;
  color: #fff;
  background-color: #f5a305;
  border-radius: 1200px;
  padding: 3% 0;
  font-size: 1.2em;
}
.page4_wrap .have_reward .btns {
  margin: 0 auto;
  color: #ca9734;
  width: 85%;
  font-size: 1.2em;
  overflow: hidden;
}
.page4_wrap .have_reward .btns p {
  width: 45%;
  background-color: #fed072;
  display: inline-block;
  padding: 3% 0;
  border-radius: 1200px;
  margin-bottom: 5%;
}
.page4_wrap .have_reward .btns p:first-child {
  float: left;
}
.page4_wrap .have_reward .btns p:last-child {
  float: right;
}

/*第四页 结束*/

/*所有弹窗样式*/
.hidden {
  display: none;
}
.background,
.share-background ,.background_two{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
.my_award_list {
  display: none;
  z-index: 2000;
  position: fixed;
  top: 11%;
  left: 3.2vw;
  width: 92%;
  border: 1px solid rgba(0, 0, 0, 0);
  max-height: 70%;
  min-height: 70%;
  height: 100%;
}
.my_award_list .bgimg {
  position: absolute;
  width: 100%;
}
.my_award_list .bgimg img {
  width: 100%;
}
.my_award_list .list {
  position: relative;
  margin: 20% auto;
  width: 94%;
  font-size: 0;
  overflow: scroll;
  height: 90%;
  z-index: 100;
    overflow-x: hidden;
}
.my_award_list .list ul {
  list-style: none;
  font-size: 0;
  width: 87%;
  margin: 0 auto;
}
.my_award_list .list ul li {
  border: 6px solid rgba(0, 0, 0, 0);
  background: url("../img/jianglibg.png") left center no-repeat;
  background-size: cover;
  -moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
  overflow: hidden;
  margin-bottom: 14%;
  width: 100%;
  margin: 0 auto 5%;
  padding-top: 5px;
  font-size: 0;
}
.my_award_list .list ul li div { 
  display: inline-block;
  font-size: 1.1em;
}
.my_award_list .list ul li .left {
	float: left;
  padding: 2% 0 2% 5%;
  font-size: 1.1rem;
}
.my_award_list .list ul li .right {
	width: 35%;
  float: right;
  padding: 1% 2% 2% 0;
  color: #fff;
  font-size: 1.1rem;
}
.my_award_list .list .img {
  margin: 4% auto;
  width: 85%;
}
.my_award_list .list .img img {
  width: 100%;
}
.my_award_list .close {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 1000;
}
@media (max-width: 350px) {
	.my_award_list .bgimg{
  position: absolute;
  width: 90%;
  left: 5vw;
}
  .my_award_list {
    position: fixed;
    top: 2%;
  }
  .my_award_list .list {
    height: 100%;
  }
}
.ranking {
  display: none;
  z-index: 2000;
  position: fixed;
  top: 15%;
  left: 4vw;
  width: 92%;
  border: 1px solid rgba(0, 0, 0, 0);
  max-height: 70%;
  min-height: 70%;
  font-size: 1.2em;
}
.ranking .bgimg {
  position: absolute;
  width: 100%;
}
.ranking .bgimg img {
  width: 100%;
}
.ranking .js_list {
  position: relative;
}
.ranking .js_list table {
  margin: 15% auto;
  width: 98%;
  border: none;
}
.ranking .js_list table tr {
  border: none;
}
.ranking .js_list table th {
  color: #999999;
  padding: 10px;
}
.ranking .js_list table td {
  padding: 10px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking .js_list table tr:nth-child(2n) {
  background-color: #fff8ea;
}
.ranking .js_list table img {
  width: 20px;
}
.ranking .img {
  margin: 28% auto;
  width: 70%;
}
.ranking .img img {
  width: 100%;
}
.ranking .close {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 1000;
}
@media (max-width: 350px) {
  .ranking {
    position: fixed;
    top: 8%;
  }
  .ranking table th {
    padding: 4px !important;
  }
  .ranking table td {
    padding: 4px;
  }
}
#activity_rule {
  z-index: 2000;
  position: fixed;
  top: 6%;
  left: 6vw;
  width: 88%;
  border: 1px solid rgba(0, 0, 0, 0);
  max-height: 83%;
  font-size: 1.2em;
  height: 100%;
}
#activity_rule .bgimg {
  position: absolute;
  width: 100%;
}
#activity_rule .bgimg img {
  width: 100%;
}
#activity_rule .wrap {
  position: relative;
  margin: 14% auto;
  width: 90%;
  height: 100%;
}
#activity_rule .wrap .detail {
  width: 100%;
  max-height: 98%;
}
#activity_rule .wrap .detail >p{
	margin-bottom: 8px;
}
#activity_rule .wrap .detail ul {
  color: #48342d;
  list-style: none;
  font-size: 0.9em;
}
#activity_rule .wrap .detail ul li {
  text-align: justify;
  overflow: hidden;
  margin-bottom: 4px;
}
#activity_rule .wrap .detail ul li p {
  display: inline-block;
  float: left;
}
#activity_rule .wrap .detail ul li span {
  width: 90%;
  display: inline-block;
  float: right;
}
#activity_rule .wrap .detail ul li .more {
  margin: 0 auto;
  width: 60%;
}
#activity_rule .wrap .detail ul li .more img {
  width: 100%;
}
#activity_rule .wrap .detail .time {

}
#activity_rule .wrap .detail .color {
  color: #af8701;
}
#activity_rule .close {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 1000;
}
@media (max-width: 330px) {
	#activity_rule .bgimg{
  position: absolute;
  width: 92%;
  left: 4vw;
}
  #activity_rule{
    position: fixed;
    top: 2%;
    left: 12vw;
    width: 80%;
    max-height: 83%;
  }
  #activity_rule .wrap {
    width: 78%;
  }
  #activity_rule .wrap .detail {
    margin: auto;
    width: 100%;
    height: 87%;
    overflow: scroll;
  }
}
#activity_rule_two {
  display: none;
  z-index: 2000;
  position: fixed;
  top: 10%;
  left: 4vw;
  width: 92%;
  border: 1px solid rgba(0, 0, 0, 0);
  max-height: 83%;
  min-height: 83%;
  background: url("../img/bgtitle3.png") 0% 0% no-repeat;
  background-size: contain;
  font-size: 1.2em;
}
#activity_rule_two .wrap {
  margin: 17% auto;
  width: 90%;
}
#activity_rule_two .wrap p {
  padding-bottom: 8px;
}
#activity_rule_two .wrap .color {
  color: #af8701;
}
#activity_rule_two .wrap .detail ul {
  color: #48342d;
  list-style: none;
  font-size: .9em;
}
#activity_rule_two .wrap .detail ul li {
  text-align: justify;
  overflow: hidden;
  padding-bottom: 6px;
}
#activity_rule_two .wrap .detail ul li p {
  display: inline-block;
  float: left;
}
#activity_rule_two .wrap .detail ul li span {
  width: 90%;
  display: inline-block;
  float: right;
}
#activity_rule_two .wrap .detail ul li .more {
  margin: 0 auto;
  width: 60%;
}
#activity_rule_two .wrap .detail ul li .more img {
  width: 100%;
}
#activity_rule_two .wrap .detail ul li:last-child {
  color: #968580;
}
#activity_rule_two .wrap .detail ul spa {
  display: inline !important;
  color: #bf171f;
}
#activity_rule_two .close {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 5px;
}
@media (max-width: 330px) {
  #activity_rule_two {
    position: fixed;
    top: 4%;
    left: 5vw;
    width: 92%;
  }
}
.err_answer {
  display: none;
  z-index: 1000;
  position: fixed;
  top: 33%;
  left: 15vw;
  width: 70%;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 1.2em;
  color: #fff;
  border-radius: 5px;
}
.err_answer .title {
  padding-top: 3%;
  color: #fd7a6c;
}
.err_answer .title a {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../img/err_answer.png) center no-repeat;
  background-size: contain;
  padding-right: 5px;
}
.err_answer .explain {
  font-size: 0.9em;
  text-align: justify;
  padding: 3% 10%;
}
.err_answer p {
  margin: 5% auto;
  padding: 2% 0;
  border: 1px solid #fff;
  border-radius: 100px;
  width: 70%;
}
.draw {
  display: none;
  z-index: 1000;
  position: fixed;
  top: 33%;
  left: 15vw;
  width: 70%;
  background: url(../img/bg.png) repeat;
  font-size: 1.2em;
  border-radius: 5px;
}
.draw .title {
	width: 80%;
	margin: auto;
  padding-top: 5%;
}
.draw .btns {
  margin-top: 10%;
  margin-bottom: 7%;
  color: #fff;
}
.draw .btns p {
  display: inline-block;
  width: 42%;
  padding: 2% 0;
}
.draw .btns .cancle {
  background-color: #c9c9c9;
  border-radius: 100px;
  margin-right: 5%;
}
.draw .btns .err {
  background-color: #f4a339;
  border-radius: 100px;
}
.congratulation {
  display: none;
  z-index: 1000;
  position: fixed;
  top: 23%;
  left: 10vw;
  width: 80%;
  font-size: 1.2em;
  border-radius: 5px;
  background: #fff;
  background: url(../img/gunxi.png) center no-repeat;
  background-size: cover;
}
.congratulation .title {
  padding-top: 50%;
  color: #fff;
}
.congratulation .title span {
  color: #ffde9c;
}
.congratulation .btns {
  margin-top: 10%;
  margin-bottom: 7%;
  color: #ffde9c;
}
.congratulation .btns p {
  display: inline-block;
  width: 42%;
  padding: 2% 0;
  border: 1px solid #ffde9c;
  border-radius: 100px;
}
.congratulation .btns .yes {
  background-color: #c01920;
  margin-right: 5%;
}
.congratulation .btns .contion {
  background-color: #c01920;
}
.user_info {
  display: none;
  z-index: 1000;
  position: fixed;
  top: 23%;
  left: 8.6vw;
  width: 80%;
  background: url(../img/bg.png) repeat;
  font-size: 1.2em;
  border-radius: 5px;
  border: 4px solid #48342d;
}
.user_info .title {
  padding-top: 5%;
  color: #af8701;
}
.user_info .title p {
  display: inline-block;
  width: 30%;
  height: 3px;
  background: url(../img/huangtiao.png) no-repeat center;
  background-size: contain;
  position: relative;
  top: -4px;
}
.user_info .user_box {
  margin: 5% auto;
  width: 90%;
}
.user_info .user_box .userinfo div {
  border: 1px solid #b2b2b2;
  width: 88.833%;
  margin: auto;
  background-color: #ffffff;
  padding: 2% 0;
  text-align: left;
  text-indent: 0.3em;
  border-radius: 4px;
}
.user_info .user_box .userinfo input {
  width: 75%;
  border: none;
  font-size: 0.8em;
  padding-left: 5px;
  font-size: 1em;
}
.user_info .user_box .userinfo p {
  text-align: left;
  padding-left: 24%;
  letter-spacing: 0;
  font-size: 0.8em;
}
.user_info .user_box .note {
  font-size: 0.9em;
  color: #808080;
}
.user_info .user_box .errName,
.user_info .user_box .errNum {
  color: #fff;
  opacity: 0;
}
.user_info .btns {
  margin-top: 10%;
  margin-bottom: 7%;
  color: #ffde9c;
}
.user_info .btns p {
  display: inline-block;
  width: 42%;
  padding: 2% 0;
  border-radius: 100px;
}
.user_info .btns .yes {
  background-color: #c01920;
  margin-right: 5%;
  color: #fff;
  background-color: #f4a339;
}
.user_info .btns .contion {
  background-color: #fed072;
  color: #b68115;
}
.share {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 60%;
  z-index: 1000;
}
.share img {
  width: 100%;
}
.have_success {
  display: none;
  z-index: 1000;
  position: fixed;
  top: 35%;
  left: 26vw;
  width: 40%;
  background: rgba(0, 0, 0, 0.7);
  font-size: 1.4em;
  border-radius: 5px;
  color: #fff;
  padding: 8% 4%;
}
.have_success p{
	margin-top: 10px;
	font-size: .7em;
}
.hasselect {
	background: url(../img/haveselect.png) no-repeat !important;
	width: 80%;
  margin: -1% auto;
  padding: 5% 0 8%;
  background-size: contain !important;
}
